<template>
  <div class="wrap">
    <van-nav-bar title="设置" left-arrow @click-left="onClickLeft">
      <template #left>
        <van-icon name="arrow-left" style="color: #000; font-size: 24px" />
      </template>
    </van-nav-bar>
    <van-cell style="display: flex; align-items: center; margin-top: 5px" @click="gotoBank">
      <template #title>
        <div style="display: flex; align-items: center">
          <img
            :src="userImg"
            alt=""
            style="width: 50px; height: 50px; border: 1px solid #eee; margin: 5px"
          />
          <p>{{ userName }}</p>
        </div>
      </template>
      <template #right-icon>
        <van-icon name="arrow" />
      </template>
    </van-cell>

    <van-cell
      v-for="(value, index) in seTList"
      :key="index"
      style="display: flex; align-items: center; margin-top: 5px"
      @click="() => gotoVancell(index)"
    >
      <template #title>
        <div style="display: flex; align-items: center">
          {{ value }}
        </div>
      </template>
      <template #right-icon>
        <van-icon name="arrow" />
      </template>
    </van-cell>

    <van-nav-bar style="margin: 5px 0" @click="gotoBack()">
      <template #title>
        <span style="color: red">退出登录</span>
      </template>
    </van-nav-bar>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'

const userImg = JSON.parse(localStorage.getItem('userInfo') as string).avator
const userName = JSON.parse(localStorage.getItem('userInfo') as string).username
const router = useRouter()
const onClickLeft = () => {
  router.push('/my')
}
const gotoBank=()=>{
    router.push("/bank")
}
const gotoBack = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('userInfo')
  router.push('/')
}
const seTList = ['修改密码', '清除缓存', '屏幕亮度', '版本监测', '帮助中心', '关于我们', '邀请好友']
const gotoVancell = (index: number) => {
  switch (index) {
    case 0:
      router.push('/bank')
      return
    case 1:
      router.push('/bank')
      return
    case 2:
      router.push('/bank')
      return
    case 3:
      router.push('/bank')
      return
    case 4:
      router.push('/bank')
      return
    case 5:
      router.push('/bank')
      return
    case 6:
      router.push('/bank')
      return
  }
}
</script>
<style>
@import './manage.scss';
</style>